<template>
  <el-dialog title="添加菜单" :visible.sync="isShow" width="45%">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="80px"
      size="normal"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单名称">
            <el-input placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单地址">
            <el-input placeholder="路由地址，以/开头" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="组件地址">
            <el-input placeholder="组件存储路径地址，不以/开头" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限标识">
            <el-input placeholder="格式：controller@action" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单图标">
            <el-input placeholder="点击选择图标" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="重定向">
            <el-input placeholder="请输入Redirect" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否外链">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序">
            <el-input-number :min="1" :max="10" label="描述文字" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否显示">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否缓存">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <span slot="footer">
      <el-button @click="isShow=false">取消</el-button>
      <el-button type="primary">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'FormPage',
  data() {
    return {
      formData: {},
      rules: {},
      isShow: false,
      radio: '1'

    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: #fafafa;
}
</style>
